/*--- blog style ---*/
.latest_articles_sect{
    padding: 71px 0px 100px 0px;
    background: $bgColor;
}

.latest_articles_card {
    background: rgba($color: $bgColor2, $alpha: 0.8);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    min-height: 544px;
}
.article_img{
    width: 100%;
    overflow: hidden;
}
.article_img img{
    width: 100%;
    overflow: hidden;
}
.article_details{
    padding: 25px 30px;
}
.article_details2{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.article_details h2 {
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 0px;
    color: rgba(163, 255, 18, 0.7);
    cursor: pointer;
}
.article_details h2:hover{
    color: rgba(163, 255, 18, 1);
}
.article_details h2 span {
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    margin-bottom: 0px;
    color: rgba($color: $white, $alpha: 0.7);
    cursor: auto;
}
.article_details h3 a{
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 36px;
    color: $white;
    margin-bottom: 16px;
    text-transform: none;
    max-width: 299px;
}
.article_details p {
    font-family: $interFont;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 18px;
    color: rgba($color: $white, $alpha: 0.7);
}
.article_details a {
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 30px;
    color: rgba($color: $white, $alpha: 0.7);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.article_details a:hover{
    color: rgba(255, 255, 255, 1);
}

.article_details a span{
    margin-right: 9px;
    margin-bottom: 2px;
    opacity: 70%;
}
.article_details a:hover span{
    opacity: 100%;
}

.article_details2 h4 a {
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 50px;
    text-transform: uppercase;
    color: $white;
    display: block;
    margin-bottom: 17px;
    margin-top: 18px;
}

.article_details2 h4 a span {
    color: $themeColorBlue;
}

.article_details2 h4 a strong {
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 50px;
    text-transform: uppercase;
    color: $themeColor;
    margin-right: 10px;
}
.article_details2 h5 a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: $interFont;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 28px;
    color: rgba($color: $white, $alpha: 0.7);
    cursor: pointer;
    
}
.article_details_bgshape{
    position: absolute;
    top: 25%;
    left: 3px;
    z-index: 0;
}
.article_details_top , .article_details_bottom{
    z-index: 1;
    position: relative;
}


/*--- Gamfi Blog detail-conent Section CSS ---*/
.blog-detail-conent{
    padding-top: 60px;
    padding-bottom: 140px;
    background: $bgColor;
}
.blog-detail-conent .blog-area .blog-description .des{
    font-size: 18px;
    line-height: 36px;
    font-family: Russo One;
}
.blog-detail-conent .blog-area .blog-description .blockquote{
    position: relative;
}
.blog-detail-conent .blog-area .blog-description .blockquote:before{
    position: absolute;
    content: "";
    height: 86px;
    width: 20px;
    background: url("../images/blog/block-code.png");
    top: 15px;
}
.blog-detail-conent .blog-area .blog-description .blockquote .des-active{
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 36px;
    padding-left: 65px;
    color: $white;
}
.blog-detail-conent .blog-area .igo-blog h4{
    margin-bottom: 15px;
}
.blog-detail-conent .blog-area .tokenomics-item .project-service{
    background: $bgColor2;
    margin-right: 75px;
    padding: 45px 0 20px 65px;
}
.blog-detail-conent .blog-area .tokenomics-item .project-service .project-image img{
    margin-right: 90px;
}
.blog-detail-conent .blog-area .tokenomics-item .project-service .project-content .project-sale{
    position: relative;
}
.blog-detail-conent .blog-area .tokenomics-item .project-service .project-content .project-sale:before{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: $white;
    top: 7px;
    left: -20px;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.darkslateblue:before{
    background: $themeColorBlue;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.cyan:before{
    background: #3BCBFF;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.dodgerBlue:before{
    background: #0B58FE;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.turquoise:before{
    background: #01CC9B;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.springGreen:before{
    background: $themeColor;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.darkturquoise:before{
    background: #14A0C0;
}
.blog-detail-conent .blog-area .tokenomics-item .project-content .project-sale.turquoises:before{
    background: #3BCBFF;
}
.blog-detail-conent .blog-area .igo-blog ul{
    margin: 0;
    padding: 0;
    list-style: none;
    li{
        position: relative;
        &::before{
            position: absolute;
            content: "";
            width: 8px;
            height: 8px;
            background: #3A3B48;
            line-height: 8px;
            border-radius: 8px;
            top: 15px;
        }
    }
    li span{
        line-height: 36px;
        padding-left: 25px;
    }
}

.blog-detail-conent .blog-area .about-blog .about-menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about-menu .breadcrumbs-form .about-breadcrumbs{
    a{
        text-transform: uppercase;
    }
    i{
        font-size: 15px;
        margin-right: 5px;
    }
} 

.blog-detail-conent .blog-area .about-blog .about-menu .about-list .about-listing{
    padding: 0;
    margin: 0;
    list-style: none;
}
.blog-detail-conent .blog-area .about-blog .about-menu .about-list .about-listing li{
    display: inline-block;
    padding-right: 8px;
    a{
        background: #222231;
        padding: 15px 15px;
        display: inline-block;
        font-style: italic;
        font-size: 14px;
    }
}

.blog-detail-conent .blog-area .about-blog .about-menu .bolg-share{
    a{
        text-transform: uppercase;
    }
    i{
        font-size: 15px;
        margin-right: 10px;
    }
} 

.blog-detail-conent .blog-area .about-blog .blog-contact{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.blog-detail-conent .blog-area .about-blog .blog-contact .previous-item{
    display: flex;
    align-items: center;
    background: $bgColor5;
    padding: 10px 25px 10px 10px;
    .previous-text{
        position: relative;
        top: 10px;
    }
    .previous-image{
        margin-right: 10px;
    }
    .previous-text span{
        font-size: 14px;
        text-transform: uppercase;
        color: #7ABB1B;
        margin-bottom: 10px;
        display: block;
        font-family: Russo One;
    }
}

.blog-detail-conent .blog-area .about-blog .blog-contact .next-item{
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    background: $bgColor5;
    padding: 10px 10px 10px 35px;
    text-align: right;
    .next-text{
        padding-right: 10px;
        position: relative;
        top: 10px;
        span{
            font-size: 14px;
            text-transform: uppercase;
            color: #7ABB1B;
            margin-bottom: 10px;
            display: block;
            font-family: Russo One;
        }
    }
}

.blog-detail-conent .blog-area .about-blog .blog-contact .next-item .next-text h5 a,
 .blog-detail-conent .blog-area .about-blog .blog-contact .previous-item .previous-text h5 a{
    color: $white;
}

.blog-detail-conent .blog-area .comment-item .blog-comment{
    background: #1D1E2C;
    margin-bottom: 20px;
    padding: 30px 30px;
}
.blog-detail-conent .blog-area .comment-item h4{
    text-transform: uppercase;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay{
    display: flex;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-image img{
    min-width: 50px;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-text{
    padding-left: 15px;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-text h5{
    margin-bottom: 0;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-text span{
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    display: block;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-text p{
    margin-bottom: 15px;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-text img{
    margin-right: 10px;
}
.blog-detail-conent .blog-area .comment-item .blog-comment .blog-replay .replay-text .replay-icon a{
    text-transform: uppercase;
    font-size: 14px;
}
.blog-detail-conent .blog-area .comment-item .blog-comments{
    padding: 30px 30px;
    margin-left: 100px;
    
}
.blog-detail-conent .blog-area .form-item .form-heading h4{
    text-transform: uppercase;
}
.blog-detail-conent .blog-area .form-item .input-button input{
    background: transparent;
    width: 100%;
    border: 1px solid $borderColor2;
    padding: 15px 20px;
    color: $white;
}
.blog-detail-conent .blog-area .form-item .input-button input.textarea{
    padding-bottom: 90px;
}


.blog-detail-conent .blog-area .form-item .input-button{
    margin-bottom: 40px;
    position: relative;
    padding-top: 40px;
}
.blog-detail-conent .blog-area .form-item .input-button label{
    position: absolute;
    left: 0;
    top: 0;
    color: rgba($color: $white, $alpha: 0.7);
    font-weight: 700;
    text-transform: uppercase;
}
.blog-detail-conent .blog-area .form-item .input-submit input{
    width: 100%;
    background: $themeColorBlue;
    color: $white;
    border: none;
    padding: 17px;
    text-transform: uppercase;
    transition: 0.4s;
    font-weight: 700;
}
.blog-detail-conent .blog-area .form-item .input-submit{
    margin-bottom: 0;
}
.blog-detail-conent .blog-area .form-item .input-submit:hover .hover-shape1{
    left: 47%;
}
.blog-detail-conent .blog-area .form-item .input-submit:hover .hover-shape3{
    left: 51%;
}
.categories-area{
    background: #191A2F;
    padding: 30px 30px 8px;
    margin-bottom: 30px; 
}
.categories-item .catergories-form{
    border: 1px solid #3E3F51;
    position: relative;
    padding: 10px 20px;
}
.categories-item .catergories-form input{
    background: transparent;
    border: none;
    color: $white;
}
.categories-item .catergories-form i{
    top: 15px;
    position: absolute;
    right: 20px;
    font-size: 14px;
    color: $white;
    transition: 0.4s;
}
.categories-item .catergories-form i:hover{
    color: rgba(255,255,255,0.7);
}
.categories-item .categories-summary ul{
    padding: 0;
    margin: 0;
    list-style: none; 
    li a {
        color: rgba($color: $white, $alpha: 0.7);
        transition: 0.4s;
        line-height: 36px;
        font-family: $russoOneFont;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 36px;
        color: rgba($color: $white, $alpha: 0.7);
        &:hover{
            color: $white;
        }
    }
}

.post-item .post-shade{
    margin-top: 35px;
    display: block;
    h4{
        text-transform: uppercase;
    }
    img{
        padding-left: 10px;
    }
}

.post-item .recent-content{
    display: flex;
    margin-bottom: 20px;
    .recent-text{
        padding-left: 15px;
        position: relative;
        top: 7px;
        span {
            margin-bottom: 10px;
            display: block;
            font-family: $russoOneFont;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 30px;
            text-transform: uppercase;
            color: rgba($color: $white, $alpha: 0.7);
        }
        h5 a{
            color: $white;
        }
    }
}

.tag-menu ul{
    padding: 0;
    margin: 0;
    list-style: none;
    li{
        display: inline-block;
        padding-right: 5px;
        margin-bottom: 35px;
    }
    li a{
        background: #232433;
        padding: 15px 15px;
        font-style: italic;
    }
}

.latest-item.hover-shape-inner .latest-text{
    overflow: hidden;
}
.latest-item.hover-shape-inner .latest-text,
.latest-item.hover-shape-inner{
    position: relative;
}
div.latest-item .hover-shape-bg{
    z-index: 3;
}
.news-letter-item.hover-shape-inner{
    background: radial-gradient(circle, #4a4176 -53%, $bgColor2 0%);
    position: relative;
    z-index: 9;
    padding: 30px 30px;
}
.news-letter-item.hover-shape-inner .hover_shape1 {
    left: 22%;
}
.news-letter-item.hover-shape-inner .hover_shape2 {
    left: 60.5%;
    width: 60px;
}
.news-letter-item.hover-shape-inner .hover_shape3 {
    left: 41%;
    width: 40px;
}


.categories-area h4.blog-title {
    font-size: 18px;
    text-transform: uppercase;
}
.categories-area h4.blog-title img{
    margin-bottom: 3px;
    width: 80.29px;
    height: 12px;
}

.news-letter-item h4 {
    font-family: $russoOneFont;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    max-width: 240px;
    width: 100%;
    color: $white;
}
.news-letter-item .newsletter-link form input[type="email"]{
    width: 100%;
    border: 2px solid #494A5C;
    background: transparent;
    color: $white;
    padding: 15px 0 15px 20px;
    margin-bottom: 30px;
}
.news-letter-item .newsletter-link .newsletter-btn input[type="submit"]{
    padding: 17px 0;
    width: 100%;
    text-transform: uppercase;
    background: $themeColor;
    border: transparent;
    font-family: $russoOneFont;
}